<template>
  <a :href="href" class="em-cell" :class="cname">
    <span class="em-cell-mask" v-if="isLink"></span>
    <div class="em-cell-wrapper">
      <div class="em-cell-title">
        <slot name="icon">
          <i v-if="icon" class="alice-icon" :class="'alice-icon-' + icon"></i>
        </slot>
        <slot name="title">
          <span class="em-cell-text" v-text="title"></span>
          <span class="em-cell-label" v-text="label" v-if="label"></span>
        </slot>
      </div>

      <div class="em-cell-value" :class="{'is-link': isLink}">
        <slot>
          <span v-text="value"></span>
        </slot>
      </div>
    </div>
    <div class="em-cell-right">
      <slot name="right"></slot>
    </div>
  </a>
</template>

<script>
export default {
  props: {
    icon: String,
    cname: String,
    title: String,
    label: String,
    isLink: Boolean,
    value: {},
    to: String
  },
  data() {
    return {};
  },
  computed: {
    href() {
      if (this.to && !this.added && this.$router) {
        const resolved = this.$router.match(this.to); //正则搜索vue路由中是否有存在的路径
        if (!resolved.matched.length) return this.to; //如果没有搜索到路径  返回路径

        this.$nextTick(() => {
          this.added = true;
          this.$el.addEventListener("click", this.handleClick);
        });
        return resolved.fullPath || resolved.path;
      }
      return this.to;
    }
  },
  methods: {
    handleClick($event) {
      $event.preventDefault();
      this.$router.push(this.href);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./main.scss";
</style>